<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="shortcut icon" href="#"/>
    <link href="/godance/layui/src/css/layui.css" rel="stylesheet">
    <link href="/godance/js/My_css.css" rel="stylesheet">
    <script src="/godance/layui/src/layui.js"></script>
    <script src="/godance/js/jquery-3.4.1.js"></script>
    <script src="/godance/js/My_js.js"></script>
    <script src="/godance/js/Search.js"></script>
    <script src="/godance/js/date.js"></script>
    <style type="text/css">
        .sspan{
        }
        .show {
            border-radius: 8px;
            height: 600px;
            width: 600px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="layui-fluid" >
        <!-- 水平导航 -->
        <ul class="layui-nav layui-bg-blue">
            <!-- 导航的子项 -->
            <li class="layui-nav-item">
                <label class="layui-form-label"><img src="/godance/image/GoDance_Loge.png" width="100"/></label>
                <div id="auto"></div>
                <p id="pp" style="display: none">
                <p>
            </li>

            <!-- 导航的子项 -->
            <li class="layui-nav-item">
                <div class="layui-input-inline" style="position:relative;width:450px;left:10px">  <!--块 -->
                    <!-- 输入框 -->
                    <input id="word" type="text" name="title" required lay-verify="required" placeholder="请输入查询内容" autocomplete="off" class="layui-input" />
                </div>
            </li>

            <li class="layui-nav-item">
                <button id="button" class="layui-btn layui-btn-normal"style="position:relative;left:10px">
                    <i class="layui-icon">&#xe615;</i>搜图片
                </button>
            </li>
            <li class="layui-nav-item">
                <div class="layui-input-inline" style="position:relative;width:150px;left:10px">  <!--块 -->
                    <!-- 输入框 -->
                    <input id="Not_See" type="text" name="title" required lay-verify="required" placeholder="请输入屏蔽内容" autocomplete="off" class="layui-input" />
                </div>
            </li>

            <li id="datetime" class="layui-nav-item">
                <a>时间过滤器</a>
                <dl class="layui-nav-child">
                    <dd><a id="equals" href="#">某个时间点数据</a></dd>
                    <dd><a id="big" href="#">大于某个时间点的数据</a></dd>
                    <dd><a id="small" href="#">小于某个时间点的数据</a></dd>
                    <dd><a id="interval" href="#">某个区间的数据</a></dd>
                </dl>
            </li>

            <button style="display: none" class="layui-btn"  id="date1" >日历</button>

            <li class="layui-nav-item" style="left:75px">
                <a id="collection">收藏夹</a>
                <dl class="layui-nav-child">
                    <dd><a id="add_collection" href="#">增加收藏夹</a></dd>
                    <dd><a id="delete_collection" href="#">删除收藏夹</a></dd>
                    <dd><a id="add_child" href="#">增加收藏内容</a></dd>
                    <dd><a id="delete_child" href="#">删除收藏内容</a></dd>
                    <dd><a href="#">--------------------</a></dd>
                    <div id="child_bag">
                    </div>
                </dl>
            </li>

            <!-- 导航的子项 -->
            <li class="layui-nav-item" style="left:100px">
                <!--img中放图像 -->
                <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
                <!--二级菜单-->
                <dl class="layui-nav-child">
                    <dd><a id="login" href="#">登录</a></dd>
                    <dd><a href="/godance/Register.html">注册</a></dd>
                    <dd><a href="/godance/delete.html">删除账户</a></dd>
                    <dd><a id="get_out" href="#">退出</a></dd>
                </dl>
            </li>
        </ul>

        <br/>
        <br/>
        <!--搜索结果展示界面-->
        <div style="margin-left: 100px">
            <h1 ><b id="not_result"></b></h1>
            <div><img class="show" src="" id="img1"><img class="show" src="" id="img2"><img class="show" src="" id="img3"></div>
            <div><img class="show" src="" id="img4"><img class="show" src="" id="img5"><img class="show" src="" id="img6"></div>
            <div><img class="show" src="" id="img7"><img class="show" src="" id="img8"><img class="show" src="" id="img9"></div>
            <div><img class="show" src="" id="img10"><img class="show" src="" id="img11"><img class="show" src="" id="img12"></div>
        </div>

        <br/><br/><br/>
    </div>
</body>
</html>

<script type="text/javascript">
    $(function () {
        //索引名称
        index1 = "subwukong"

        $("#collection").mouseover(function () {
            var token = localStorage.getItem('token');
            $.ajax({
                url:"collection",
                headers:{
                    "Authorization": "Bearer "+token
                },
                dataType:"json",
                type:"get",
                success:function (result) {
                    if (result.code==201){
                        layer.msg("收藏夹为空 请创建新的收藏夹",{icon: 6,time:2000})
                    }else if (result.code==200){
                        $.each(result,function (i,n) {
                            if (i=="names"){
                                for (var j=0;j<n.length;j++){
                                    if (j==0){
                                        $("#child_bag").empty();
                                    }
                                    var name  = n[j]
                                    $("#child_bag").append("<dd align=\"center\">" +
                                        "<div  class=\"dropdown\">\n" +
                                        "    <button onclick='get_child(\""+name+"\","+j+");'>"+n[j]+"</button>\n" +
                                        "    <div id='child"+j+"' class=\"content\">\n" +
                                        "    </div>\n" +
                                        "</div>" +
                                        "</dd>"
                                    );
                                }
                            }
                        })
                    }else {
                        layer.msg("未登录 请登录",{icon: 5,time:2000})
                    }
                }
            })
        })
        
        $("#add_collection").click(function () {
            layui.use('layer', function() {
                var layer = layui.layer;
                /** layer.open 会返回当前层索引 它是诸如layer.close(index)等方法的必传参数。如果ayer.close(index)等方法
                 *  在layer.open 中 默认index 为该当前层索引
                 * */
                var index = layer.open({
                    type: 2,
                    title: '增加收藏夹',
                    maxmin: true,
                    skin: 'layui-layer-lan',
                    shadeClose: true, //点击遮罩关闭层   就是点击旁白关闭
                    area : ['400px' , '280px'],
                    /**在默认状态下，layer是宽高都自适应的
                     但当你只想定义宽度时，你可以 area: '500px'，高度仍然是自适应的
                     当你宽高都要定义时，你可以 area: ['500px', '300px']*/
                    content:'http://localhost:9090/godance/add_collection.html',//弹框显示的url,对应的页面
                });
            })
        })

        $("#delete_collection").click(function () {
            layui.use('layer', function() {
                var layer = layui.layer;
                /** layer.open 会返回当前层索引 它是诸如layer.close(index)等方法的必传参数。如果ayer.close(index)等方法
                 *  在layer.open 中 默认index 为该当前层索引
                 * */
                var index = layer.open({
                    type: 2,
                    title: '删除收藏夹',
                    maxmin: true,
                    skin: 'layui-layer-lan',
                    shadeClose: true, //点击遮罩关闭层   就是点击旁白关闭
                    area : ['400px' , '280px'],
                    /**在默认状态下，layer是宽高都自适应的
                     但当你只想定义宽度时，你可以 area: '500px'，高度仍然是自适应的
                     当你宽高都要定义时，你可以 area: ['500px', '300px']*/
                    content:'http://localhost:9090/godance/delete_collection.html',//弹框显示的url,对应的页面
                });
            })
        })

        $("#add_child").click(function () {
            layui.use('layer', function() {
                var layer = layui.layer;
                /** layer.open 会返回当前层索引 它是诸如layer.close(index)等方法的必传参数。如果ayer.close(index)等方法
                 *  在layer.open 中 默认index 为该当前层索引
                 * */
                var index = layer.open({
                    type: 2,
                    title: '增加收藏夹内容',
                    maxmin: true,
                    skin: 'layui-layer-lan',
                    shadeClose: true, //点击遮罩关闭层   就是点击旁白关闭
                    area : ['400px' , '280px'],
                    /**在默认状态下，layer是宽高都自适应的
                     但当你只想定义宽度时，你可以 area: '500px'，高度仍然是自适应的
                     当你宽高都要定义时，你可以 area: ['500px', '300px']*/
                    content:'http://localhost:9090/godance/add_child.html',//弹框显示的url,对应的页面
                });
            })
        })

        $("#delete_child").click(function () {
            layui.use('layer', function() {
                var layer = layui.layer;
                /** layer.open 会返回当前层索引 它是诸如layer.close(index)等方法的必传参数。如果ayer.close(index)等方法
                 *  在layer.open 中 默认index 为该当前层索引
                 * */
                var index = layer.open({
                    type: 2,
                    title: '删除收藏夹内容',
                    maxmin: true,
                    skin: 'layui-layer-lan',
                    shadeClose: true, //点击遮罩关闭层   就是点击旁白关闭
                    area : ['400px' , '280px'],
                    /**在默认状态下，layer是宽高都自适应的
                     但当你只想定义宽度时，你可以 area: '500px'，高度仍然是自适应的
                     当你宽高都要定义时，你可以 area: ['500px', '300px']*/
                    content:'http://localhost:9090/godance/delete_child.html',//弹框显示的url,对应的页面
                });
            })
        })
    })
    get_child = function (value,index) {
        var token = localStorage.getItem('token');
        $.ajax({
            url:"bag_child",
            headers:{
                "Authorization": "Bearer "+token
            },
            data:{
                "name":value,
            },
            dataType:"json",
            type:"get",
            success:function (result) {
                if (result.code==200){
                    $("#child"+index).empty();
                    $.each(result,function (i,n) {
                        if (i=="children"){
                            for (var j=0;j<n.length;j++){
                                if (j==0){
                                }else{
                                    $("#child"+index).append("<a herf='' onclick='Open(\""+n[j].href+"\");'>"+n[j].title+"</a>")
                                }
                            }
                        }
                    })
                }else {
                    layer.msg("未登录 请登录",{icon: 5,time:2000});
                }
            }
        })
    }
    Open = function (href){
        window.location.href=href;
    }

    Dotest = function (value) {
        var search = $("#text"+value).html()
        $("#word").val(search)
        $("#Not_See").val("")
        Dosearch();
    }

    Dosearch = function (){
        $("#auto").hide();
        var search_name =$("#word").val();
        var Not_search =$("#Not_See").val();
        $.ajax({
            url:"search_result_image",
            data:{
                "search":search_name,
                "not_see":Not_search,
                "index":index1,
                "pagesize":12,
                "curpage":1,
            },
            dataType:"json",
            type:"get",
            success:function (data) {
                $("#not_result").html("")
                for (var i=1;i<=12;i++){
                    //todo 图片src
                    $("#img"+i).attr('src', data.results[i-1].url)
                }
                if(data.totalcount ==0){
                    $("#not_result").html("抱歉 没有找到与 "+$("#word").val()+"相关的网页")
                    return
                }


                // 加载laydate模块
                layui.use('laypage', function() {
                    var laypage = layui.laypage;
                    laypage.render({
                        elem: 'page',
                        count: data.totalcount, //数据总数，从服务端得到
                        groups: 5, // 连续出现的页码个数
                        layout: ['prev', 'page', 'next'], // 自定义排版
                        //limits: [5, 10, 20], // layout属性设置了limit值，可会出现条数下拉选择框
                        jump: function(obj, first) {
                            //当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
                            // obj包含了当前分页的所有参数，比如：
                            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            console.log(obj.limit); //得到每页显示的条数
                            //首次不执行
                            if (!first) {
                                $.ajax({
                                    url:"search_result_image",
                                    data:{
                                        "search":search_name,
                                        "not_see":Not_search,
                                        "index":index1,
                                        "pagesize":12,
                                        "curpage":obj.curr,
                                    },
                                    dataType:"json",
                                    type:"get",
                                    success:function (result) {
                                        for (var i=1;i<=12;i++){
                                            //todo 图片src
                                            $("#img"+i).attr('src', result.results[i-1].url)
                                        }

                                    }
                                })
                            }
                        }
                    });
                });
                $("#located").css("display","")
            }
        })
    }
    See_all =function (value) {
        window.location.href='http://localhost:9090/godance/see_all.html?id='+$("#result"+value+"1").val();
    }
</script>
